<template>
    <div class="user-add-card">
        <div class="wrapper">
            <p class='tips'>请填写本人的银行卡信息，不支持信用卡</p>
            <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">持卡人</span>
                    <div class="form__value disabled">
                        <p class="item"> {{user.name}} </p>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">身份证号</span>
                    <div class="form__value disabled">
                        <p class="item"> {{user.idCard}} </p>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">银行预留手机号</span>
                    <div class="form__value">
                        <input v-model='tel' type="tel" placeholder="请输入手机号">
                    </div>
                </li>
                 <li class="form__item">
                   <span class="form__key">银行卡号</span>
                   <div class="form__value">
                       <input v-model='card' type="tel" @keyup="blr(card)" maxlength="23" placeholder="请输入银行储蓄卡卡号">
                   </div>
                </li>
                <!-- <li class="form__item">
                    <span class="form__key">银行卡号</span>
                    <div class="form__value">
                        <input v-model='card' @change='getBankName' type="tel" placeholder="请输入银行储蓄卡卡号">
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">开户行</span>
                    <div class="form__value bank-item">
                        <p class="item" v-if='!loading_bank'>{{bankName || placeholder}}</p>
                        <p class="item" v-if='loading_bank'> </p>
                        <loading v-if='loading_bank' mode='absolute' :size='12'></loading>
                    </div>
                </li> -->
            </ul>
        <!-- 
            <p class='title'>拍摄银行卡正面照片</p>
            <div class="scan-item">
                <div class="detail" v-if='bankInfo'>
                    <div class="img"><img :src="bankInfo.url | oss('?x-oss-process=image/resize,w_200')" @click='showImg(bankInfo.url,"front")'></div>
                    <div class="info">
                        <p>{{bankInfo.bankCardNumber}}</p>
                        <p class='bank-info'><img :src="bankInfo.logoUrl" width="16" alt=""><span>{{bankInfo.bankName}} ({{bankInfo.bankCardTypeStr}})</span></p>
                    </div>
                    <span class="re-upload">重拍</span>
                </div>
                <upload @done='uploadImg' :class='{uploaded:bankInfo}'>
                    <span class='logo'><img src="../images/photo_card@3x.png"> </span>
                    <p>+ 银行卡卡号</p>
                </upload>
                <loading mask v-show='loading_bank' mode='full' :size='14'></loading>
            </div> -->

            <div class="bind-card-button">
                <span class="button long" @click='bindCard' :class='{disabled:!bankPass}'>确认绑卡</span>
            </div>
        </div>

        <image-view :url='currentMidImg' :show='modal_img_show' @close='modal_img_show = false' deleteButton @delete='deleteImg'></image-view>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import pickerList from '../components/PickerList.vue'
    import upload from '../components/Upload.vue'
    import imageView from '../components/ImageView.vue'
    import oss from '../filters/filter-oss'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userAddCardVerifiedValidation } from '../validation/validation'
    import { rules, getQueryString } from '../utils/utils'
    import { storageApi, authApi, userApi, lenderApi, bankcardApi, reportApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            loading,
            upload,
            imageView
        },
        filters:{
            oss
        },
        data() {
            return {
                bankName:'',
                bankPass:'',
                bankInfo:'',
                currentImg:'',
                modal_img_show:false,
                loading_bank:false,
                placeholder:'--',
                user:{},
                id:'',
                code:'',
                sent:false,
                oldcard:this.$route.query.oldcard,
                card:'',
                tel:'',
                show_warning:false,
                routerName:this.$route.query.routername
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            currentMidImg(){
                return oss(this.currentImg,'?x-oss-process=image/resize,w_600')
            },
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            ageAuth(){
                let id = this.id
                let date = id.substring(6, 10) + "-" + id.substring(10, 12) + "-" + id.substring(12, 14);
                let momentDate = moment(date)
                let momentNow = moment()
                let diff = momentNow.diff(momentDate, 'years')
                
                if(diff>=18 && diff<= 55){
                    return true
                }
                return false
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome'
            ]),

             // function
            blr(card){
                let length=card.length;
                if(length>14){
                    this.bankPass = true
                }else{
                    this.bankPass = false;
                }
            },
            uploadImg(fileData){
                this.loading_bank = true
                this.bankPass = false

                storageApi.uploadBase64({
                    base64:fileData,
                    type:'bankcard'
                })
                .then(result=>{
                    this.bankPass = true
                    this.bankInfo = result
                    this.loading_bank = false
                    return
                })
                .catch(error => {
                    this.bankPass = false
                    this.bankInfo = ''
                    this.loading_bank = false
                })
            },
            goRouter(code){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search
                let realUrl = `${protocol}//${host}${pathname}${search}#auth`
                let name = 'auth'

                if(code == 'personal') name = 'info-base'
                if(code == 'zhima') {
                    if(!this.configInfo.zmAutoAuth){
                        this.$router.replace({
                            name:'auth-zmxy',
                        })
                        return
                    }
                    this.showLoading()
                    authApi.zhimaAuthUrl({
                        callBackUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'mobile') {
                    this.showLoading()
                    reportApi.carrier51gjj({
                        returnUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result.url
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'bankcard') name = 'add-bankcard'
                this.$router.replace({
                    name:name,
                })
            },
            bindCard(){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search
                let realUrl = `${protocol}//${host}${pathname}${search}#add-bankcard`

                if(!this.tel){
                    this.setMsgTip({
                        text:'请输入手机号',
                        type:'warn'
                    })
                    return
                }
                if(this.tel && !rules.tel(this.tel)){
                    this.setMsgTip({
                        text:'请输入正确的手机号',
                        type:'warn'
                    })
                    return
                }

                this.showLoading()
                bankcardApi.bindCard({
                    cardNo:this.card,
                    phone:this.tel,
                    //bankCardUrl:this.bankInfo.url,
                    callBackUrl:realUrl
                })
                .then(result=>{
                    this.hideLoading()
                    if(result.jump){
                        location.href = result.url
                    }
                    else{
                        this.setMsgTip({
                            text:'绑定银行卡成功',
                            type:'success'
                        })
                        this.$router.push({
                            name:'auth'
                        })
                    }
                    console.log(result)
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            // getBankName(){
            //     this.bankName = ''
            //     this.loading_bank = true
            //     this.bankPass = false
            //     bankcardApi.getBankName({
            //         cardNo:this.bankInfo.bankCardNumber
            //     })
            //     .then(result=>{
            //         this.bankName = result
            //         this.loading_bank = false
            //         this.bankPass = true
            //         console.log(result)
            //     })
            //     .catch(error=>{
            //         this.loading_bank = false
            //         console.error(error)
            //     })
            // },
            add(item){
                let params = {
                    card:this.bankInfo.bankCardNumber,
                    tel:this.tel
                }
                if(!userAddCardVerifiedValidation(params)) return

                if(!this.oldcard){
                    this.showLoading()
                    bankcardApi.add({
                        cardNo:this.card,
                        mobile:this.tel,
                        returnUrl:location.href
                    })
                    .then(result=>{
                        if(result.jump){
                            location.href = result.url
                            return
                        }
                        this.setMsgTip({
                            text:'添加银行卡成功',
                            type:'success'
                        })
                        this.$router.back()
                        this.hideLoading()
                        console.log(result)
                    })
                    .catch(error=>{
                        this.hideLoading()
                        console.error(error)
                    })
                }
                else{
                    if(!this.code){
                        this.setMsgTip({
                            text:'请输入验证码',
                            type:'warn'
                        })
                        return
                    }
                    this.showLoading()
                    bankcardApi.change({
                        oldCardNo:this.oldcard,
                        newCardNo:this.card,
                        mobile:this.tel,
                        smsCode:this.code,
                        returnUrl:location.href
                    })
                    .then(result=>{
                        if(result.jump){
                            location.href = result.url
                            return
                        }
                        this.setMsgTip({
                            text:'更换银行卡成功',
                            type:'success'
                        })
                        this.$router.back()
                        this.hideLoading()
                        console.log(result)
                    })
                    .catch(error=>{
                        this.hideLoading()
                        console.error(error)
                    })
                }
            },
            showImg(img){
                this.modal_img_show = true
                this.currentImg = img
            },
            deleteImg(){
                this.modal_img_show = false
                this.bankPass = false
                this.bankInfo = ''
            },
            getCode(){
                if(this.sent) return
                this.sent = true

                userApi.sendSms({
                    mobile:this.tel,
                    type:'DEFAULT'
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                })
            },
            getStatus(){
                return authApi.authItemStatus({
                    itemCode:'bankcard'
                })
                .then(result=>{
                    if(result.status >= 30){
                        this.$router.push({ name:'auth' })
                    }
                })
                .catch(error=>{
                    console.error(error)
                })
            },
            getUser(){
                this.showLoading()
                userApi.mine()
                .then(result=>{
                    this.hideLoading()
                    this.user = result
                    this.tel = result.phone
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){
            let status = this.$route.query.status
            let nextItem = this.$route.query.nextItem
            let msg = decodeURIComponent(this.$route.query.msg)
            if(status == 'fail'){
                this.setMsgTip({
                    text:msg,
                    type:'error'
                })
            }
            if(status == 'success'){
                this.goRouter(nextItem)
                return
            }
            this.getStatus()
            this.getUser()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-add-card{
        .title{
            @extend %font-caption;
            padding-top: 24px;
            text-align: center;
            padding-bottom: 8px;
        }
        .bank-item{
            position: relative;
            .loading--absolute{
                position: absolute;
                right:0px;
                width: 60px;
                top:50%;
                margin-top:-22.5px;
            }
        }
        .tips{
            padding: 16px 24px 0 24px;
        }
        .bind-card-button{
            margin-top: 30px;
            padding:0 22px 30px 22px;
        }
        .verification{
            .form__value{
                justify-content: flex-end;
                flex:none;
            }
            .form__key{
                flex:1;
            }
        }
        .scan-item{
            position: relative;
            overflow:hidden;
            margin:0 16px;
            background-color: #fff;
            text-align: center;
            height:108px;
            box-sizing:border-box;
            border-radius:2px;
            margin-bottom: 8px;
            .component-upload{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                &.uploaded{
                    position: absolute;
                    opacity:0;
                    width: 80px;
                    height: 40px;
                    right: 0;
                    bottom: 0;
                }
                p{
                    @extend %font-caption;
                    padding-top: 8px;
                }
            }
            .detail{
                width: 100%;
                height: 100%;
                box-sizing:border-box;
                display: flex;
                padding: 18px 16px;
                .info{
                    text-align: left;
                    padding-left: 16px;
                    @extend %font-body1;
                    color:$importColor;
                }
                .img{
                    width: 90px;
                    height: 67.5px;
                    position: relative;
                    overflow:hidden;
                    background: $sectionColor;
                    img{
                        position: absolute;
                        top:0;
                        left:0;
                        width:100%;
                    }
                }
                .re-upload{
                    position: absolute;
                    right:16px;
                    bottom: 16px;
                    padding-left: 20px;
                    background: url(../images/reshoot@3x.png) no-repeat center left;
                    background-size: 16px 16px;
                }
            }
            .logo{
                display: block;
                height: 26px;
                text-align: center;
                img{
                    height: 100%;
                }
            }
            .bank-info{
                span{
                    vertical-align:middle;
                    padding-left: 4px;
                    display: inline-block;
                }
            }
        }
    }

</style>
